"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { GraduationCap, Users } from "lucide-react"

// 角色选择组件，用于注册流程中选择用户类型
export function RoleSelection() {
  const router = useRouter()
  const [selectedRole, setSelectedRole] = useState<string | null>(null)

  // 处理角色选择
  const handleRoleSelect = (role: string) => {
    setSelectedRole(role)
  }

  // 处理继续按钮点击
  const handleContinue = () => {
    if (selectedRole) {
      router.push(`/register/${selectedRole}`)
    }
  }

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card
          className={`cursor-pointer border-2 transition-all ${
            selectedRole === "student" ? "border-primary" : "border-border"
          }`}
          onClick={() => handleRoleSelect("student")}
        >
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center">
              <GraduationCap className="mr-2 h-5 w-5" />
              学生
            </CardTitle>
          </CardHeader>
          <CardContent>
            <CardDescription>注册为学生账号</CardDescription>
          </CardContent>
        </Card>

        <Card
          className={`cursor-pointer border-2 transition-all ${
            selectedRole === "counselor" ? "border-primary" : "border-border"
          }`}
          onClick={() => handleRoleSelect("counselor")}
        >
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center">
              <Users className="mr-2 h-5 w-5" />
              辅导员
            </CardTitle>
          </CardHeader>
          <CardContent>
            <CardDescription>注册为辅导员账号。</CardDescription>
          </CardContent>
        </Card>
      </div>

      <Button className="w-full" disabled={!selectedRole} onClick={handleContinue}>
        继续
      </Button>
    </div>
  )
}

